<template>
  <el-drawer title="查看物流信息" :visible.sync="dialogVisible" :size="size">
    <div :style="{'max-height': this.timeLineHeight + 'px' }" style="overflow-y: scroll">
    <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 20px">
      <el-tab-pane label="商家物流" name="supplier">
<!--        <div class="warn-box">-->
<!--          <svg-icon style="margin-right: 17px" icon-class="warn" :size="20" />-->
<!--          <div class="flex flex-1 tip">-->
<!--            <p class="flex-1">-->
<!--              1、可上传PDF、JPG、PNG等格式文件，单个文件最大限制10M；-->
<!--              <br>2、用户发生租赁违约时，物流发货凭证和用户签收凭证可做法律依据。添加后不可进行删除，请谨慎操作。-->
<!--            </p>-->
<!--            <p>-->
<!--              点击下载<a-->
<!--                href="https://zuxiaoqi-file.oss-cn-beijing.aliyuncs.com/pdf/%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9.pdf"-->
<!--                class="blue-font"-->
<!--              >发货注意事项</a>-->
<!--            </p>-->
<!--            <p>-->
<!--              点击下载<el-button type="text" @click="getSignReceipt">用户签收凭证</el-button>-->
<!--              &lt;!&ndash; <a-->
<!--                href="https://image-xxz.oss-cn-beijing.aliyuncs.com/download/%E6%9C%AC%E4%BA%BA%E7%AD%BE%E6%94%B6%E5%87%AD%E8%AF%81%E6%A0%B7%E5%BC%8F%E8%A1%A8.doc"-->
<!--                class="blue-font"-->
<!--              >用户签收凭证</a> &ndash;&gt;-->
<!--            </p>-->
<!--          </div>-->
<!--        </div>-->
      </el-tab-pane>
      <el-tab-pane label="用户物流" name="user" />
    </el-tabs>
    <div class="content">
      <p style="margin-left: 20px">物流信息</p>
      <div class="flex info">
        <p class="flex-1">
          <label>物流名称：</label>{{
            infoData.delivery_type == 1
              ? infoData.logistics_name || "无"
              : infoData.delivery_type == 2
                ? "上门自取"
                : infoData.delivery_type == 3
                  ? "上门安装"
                  : "无"
          }}
          <i v-if="infoData.logistics_name && $hasMethod('#editLogistics')" type="primary" class="el-icon-edit" @click="editFlow('name')"></i>
        </p>
        <p class="flex-1">
          <label>物流单号：</label>{{ infoData.logistics_no ? infoData.logistics_no : "无" }}
          <i v-if="infoData.logistics_no && $hasMethod('#editLogistics')" size="mini" type="primary" class="el-icon-edit" @click="editFlow('no')"></i>
        </p>
        <p v-if="activeName === 'supplier'" class="flex-1">
          <label>收货类型：</label>{{ infoData.delivery_type == 1 ? "商家确认收货" : "无" }}
        </p>
      </div>
<!--      <div v-if="activeName === 'supplier'" class="flex certify">-->
<!--        <div class="flex-1 flex">-->
<!--          <label>发货凭证：</label>-->
<!--          <div class="flex-1">-->
<!--            <crop-upload-->
<!--              ref="cropUpload"-->
<!--              :multiple="true"-->
<!--              show-type="photo"-->
<!--              :hide-delete="true"-->
<!--              :init-val="infoData.images"-->
<!--              wrapper-width="100px"-->
<!--              wrapper-height="100px"-->
<!--              :photo-width="100"-->
<!--              :photo-height="100"-->
<!--              @setVal="imgChange"-->
<!--            />-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="flex-1 flex">-->
<!--          <label>用户签收凭证：</label>-->
<!--          <div class="flex-1">-->
<!--            <crop-upload-->
<!--              ref="cropUpload1"-->
<!--              :multiple="true"-->
<!--              show-type="photo"-->
<!--              :hide-delete="true"-->
<!--              :init-val="infoData.sign_proof"-->
<!--              wrapper-width="100px"-->
<!--              wrapper-height="100px"-->
<!--              :photo-width="100"-->
<!--              :photo-height="100"-->
<!--              @setVal="proofChange"-->
<!--            />-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
      <p style="margin-top: 20px;margin-left: 20px">物流记录</p>
      <div class="flow_table">
        <div class="flex header">
          <p class="text-center" style="width: 250px">时间</p>
          <p class="text-center flex-1">物流信息</p>
        </div>
        <div class="flow_info">
          <div v-for="(item, index) in dataList" :key="index" class="flex">
            <p style="width: 185px">{{ item.time }}</p>
            <span class="circle" />
            <p class="flex-1">{{ item.context }}</p>
          </div>
        </div>
      </div>
    </div>
<!--    <div slot="footer" class="dialog-footer" style="text-align: center">-->
<!--      <el-button type="primary" @click="dialogVisible = false">关闭</el-button>-->
<!--    </div>-->
    <el-dialog
      width="500px"
      :title="innerTitle"
      :visible.sync="innerVisible"
      append-to-body
    >
      <el-form :model="folwForm">
        <el-form-item v-if="editCode == 'logistics_name' " label="物流名称：" label-width="120px">
          <el-select
            v-model="folwForm.logistics_name"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in logisticsNames"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="editCode == 'logistics_no' " label="物流单号：" label-width="120px">
          <el-input v-model="folwForm.logistics_no" maxlength="20" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelEdit">取 消</el-button>
        <el-button type="primary" @click="editFlowInfo">确 定</el-button>
      </div>
    </el-dialog>
    </div>
  </el-drawer>
</template>

<script>
import { getLogisticAll, getLogisticInfo, setOrderVoucher, editOrderExpress, getSignReceipt } from '@/api/order'
import cropUpload from '@/components/cropUpload'
export default {
  components: { cropUpload },
  props: ['orderId'],
  data() {
    return {
      size:'820px',
      dialogVisible: false,
      timeLineHeight:'',
      activeName: 'supplier',
      infoData: {},
      dataList: [],
      innerVisible: false,
      innerTitle: '',
      folwForm: {
        logistics_name: '',
        logistics_no: ''
      },
      editCode: 'logistics_name',
      logisticsNames: []
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getInfo()
        this.getSelect()
      } else {
        this.activeName = 'supplier'
      }
    }
  },
  mounted() {
    this.timeLineHeight = document.documentElement.clientHeight - 90;
    window.onresize = () => {
      this.timeLineHeight = document.documentElement.clientHeight - 90;
    };
    },
  methods: {
    // 下载签收回单
    getSignReceipt(order_id) {
      getSignReceipt({ order_id: this.orderId }).then(res => {
        const a = document.createElement('a')
        a.href = window.location.origin + res.pdf

        a.download = '签售回执.pdf'
        a.click()
      })
    },
    getSelect() {
      getLogisticAll().then(res => {
        this.logisticsNames = res || []
      })
    },
    handleClick(tab, event) {
      this.getInfo()
    },
    editFlow(type) {
      this.innerVisible = true
      this.innerTitle = type == 'name' ? '修改物流名称' : '修改物流单号'
      this.editCode = type == 'name' ? 'logistics_name' : 'logistics_no'
    },
    editFlowInfo() {
      const { logistics_name, logistics_no } = this.folwForm
      const params = {
        orderId: this.orderId,
        editCode: this.editCode,
        editValue: this.editCode == 'logistics_name' ? logistics_name : logistics_no
      }
      if (this.editCode == 'logistics_name') {
        if (!logistics_name) {
          this.$message.warning('物流名称不能为空')
          return false
        }
      }
      if (this.editCode == 'logistics_no') {
        if (!logistics_no) {
          this.$message.warning('物流单号不能为空')
          return false
        }
        if (logistics_no && !(/^[a-zA-Z0-9]{1,20}$/).test(logistics_no)) {
          this.$message.warning('物流单号格式错误')
          return false
        }
      }
      editOrderExpress(params).then(res => {
        this.cancelEdit()
        this.getInfo()
      })
    },
    cancelEdit() {
      this.folwForm = {
        logistics_name: '',
        logistics_no: ''
      }
      this.innerVisible = false
    },
    imgChange(val) {
      setOrderVoucher({
        orderId: this.orderId,
        type: 1,
        images: val
      }).then((res) => {
        this.infoData.images.push(val)
        this.$refs.cropUpload.sortList = this.infoData.images
      })
    },
    proofChange(val) {
      setOrderVoucher({
        orderId: this.orderId,
        type: 3,
        images: val
      }).then((res) => {
        this.infoData.sign_proof.push(val)
        this.$refs.cropUpload1.sortList = this.infoData.sign_proof
      })
    },
    getInfo() {
      getLogisticInfo({
        orderId: this.orderId,
        type: this.activeName === 'supplier' ? 1 : 2
      }).then((res) => {
        this.infoData = res || {}
        this.infoData.images = this.infoData.images
          ? this.infoData.images.split(',')
          : []
        this.infoData.sign_proof = this.infoData.sign_proof
          ? this.infoData.sign_proof.split(',')
          : []
        this.dataList = this.infoData.info ? this.infoData.info.data : []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tip {
  p:first-child {
    line-height: 22px;
  }
  p:not(:first-child) {
    padding: 16px 30px;
    border-left: 1px solid #ff9f37;
  }
}
.content > p {
  font-size: 16px;
  line-height: 23px;
}
.info,
.certify {
  padding: 0 60px;
  margin-top: 10px;
  p {
    line-height: 23px;
    label {
      color: #666666;
    }
  }
}
.flow_table {
  border: 1px solid #eeeeee;
  margin-top: 10px;
}
.header p {
  height: 40px;
  line-height: 40px;
  background: #f5f5f5;
  font-size: 16px;
  color: #666666;
}
.flow_info {
  padding: 0 45px;
  max-height: 800px;
  overflow: auto;
  & > div {
    position: relative;
    padding: 10px 0;
    &:first-child {
      padding-top: 20px;
      .circle::before {
        display: none;
      }
    }
    &:last-child {
      padding-bottom: 20px;
      .circle::after {
        display: none;
      }
    }
  }
  p {
    color: #999999;
    line-height: 20px;
  }
}
.circle {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: #e8e8e8;
  border-radius: 50%;
  margin-left: 20px;
  margin-right: 20px;
  text-align: center;
  &::before {
    position: absolute;
    top: 0;
    height: 50%;
    display: inline-block;
    content: "";
    width: 1px;
    background-color: #e8e8e8;
  }
  &::after {
    position: absolute;
    bottom: 0;
    height: 50%;
    display: inline-block;
    content: "";
    width: 1px;
    background-color: #e8e8e8;
  }
}
a,
a:focus,
a:hover {
  color: $mainBlue;
}
.editBtn{
  margin-left: 10px;
}
</style>
